<template>
    <div class="menu-container">
        <!-- 添加router-link包装Logo -->
        <router-link to="/home" class="logo-link">
            <img src="@/assets/image/gshnbst_logo.png" class="logo">
        </router-link>

        <el-menu mode="horizontal" @select="handleSelect" class="flex-grow">
            <el-menu-item index="/home">首页</el-menu-item>
            <el-menu-item index="/announcement-list">公告</el-menu-item>
            <el-menu-item index="/download-resources">资源下载</el-menu-item>
            <el-menu-item index="/about-page">关于我们</el-menu-item>
        </el-menu>
        <div class="time-display">{{ currentTime }}</div>
    </div>
</template>

<script setup>
import {useRouter} from 'vue-router'
import {ref, onMounted, onBeforeUnmount} from 'vue'

const router = useRouter()
const currentTime = ref('')

const handleSelect = (key) => {
    router.push(key)
}

const updateTime = () => {
    const now = new Date()
    currentTime.value = now.toLocaleString('zh-CN', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit',
        second: '2-digit',
        hour12: false
    })
}

onMounted(() => {
    updateTime()
    const timer = setInterval(updateTime, 1000)
    onBeforeUnmount(() => clearInterval(timer))
})
</script>

<style scoped>
.menu-container {
    display: flex;
    align-items: center;
    width: 100%;
}

/* 添加Logo链接样式 */
.logo-link {
    display: inline-block;
    cursor: pointer;
}

.logo {
    height: 40px;
    margin-right: 20px;
}

.flex-grow {
    flex-grow: 1;
}

.time-display {
    margin-left: 20px;
    font-size: 14px;
    color: #333;
}
</style>